<template>
  <div class="mainContainer">
    <div class="title">
      <span>应用详情</span>
      <Icon type="md-close" style="float:right;cursor:pointer" @click="close" />
    </div>
    <Divider class="fengeLine" />
    <div style="position: absolute; right: 10px; top: 50px;">
      <Button @click="configAppMsg" :type="btnPublic ? 'primary' : 'default'"
        >新建</Button
      >
    </div>
    <div class="mainContent" v-if="!isNew">
      <h4 style="margin: 18px 0;">应用信息</h4>
      <Table
        highlight-row
        :columns="columns"
        :data="appMsg"
        border
        @on-current-change="getData"
      ></Table>
    </div>
    <div class="mainContent" v-else>
      <span>标题：</span>
      <Input v-model="title"></Input>
      <span>标签：</span>
      <Input v-model="tags"></Input>
      <span>简介：</span>
      <Input v-model="desc" type="textarea" :rows="4"></Input>
    </div>
    <div class="button">
      <Button @click="submit">确定</Button>
    </div>
  </div>
</template>
<script>
import Config from "../../config";
import { mapState, mapActions } from "vuex";
export default {
  name: "AppMsg",
  data() {
    return {
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          title: " "
        },
        {
          title: "标题",
          key: "title"
        },
        {
          title: "所有者",
          key: "owner"
        }
      ],
      resultUrl: "",
      isNew: false,
      title: "",
      tags: "",
      desc: "",
      btnPublic: false
    };
  },
  props: ["appMsg"],
  computed: {
    ...mapState("appBuilder", ["appUrl"])
  },
  methods: {
    ...mapActions("appBuilder", ["updateAppUrl"]),
    close() {
      this.$emit("showAppMsg", false);
    },
    getData(e) {
      this.resultUrl = e.url;
    },
    configAppMsg() {
      this.isNew = !this.isNew;
    },
    submit() {
      let finalUrl;
      if (this.isNew) {
        finalUrl =
          Config.appBuildConfig.url +
          "?title=" +
          this.title +
          "&tags=" +
          this.tags +
          "&summary=" +
          this.desc +
          "&appType=HTML";
      } else {
        finalUrl =
          Config.appBuildConfig.url + "?id=" + this.resultUrl.split("=")[1];
      }
      if (finalUrl) {
        this.updateAppUrl(finalUrl);
        this.$emit("showAppMsg", false);
        this.$router.push("/appxq");
      } else {
        this.$Message.error("请选择或新建应用！");
      }
    }
  }
};
</script>
<style scoped>
.mainContainer {
  position: fixed;
  width: 520px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 1);
  z-index: 999;
}
.title {
  height: 40px;
  padding: 10px;
}
.fengeLine {
  margin: 0;
}
.mainContent {
  height: 500px;
  padding: 20px;
  overflow-y: auto;
}
.mainContent > span {
  margin: 15px 0;
  display: inline-block;
}
.button {
  height: 60px;
  padding: 10px;
}
.button button {
  float: right;
}
</style>
